<template>
  <div>
    <div class="head">
      <div class="search">
        <van-search
          v-model="value"
          clear-trigger="always"
          @input="input"
          autofocus
          placeholder="请输入人名、标题、内容等关键字"
        />
        <div class="cancel-btn" @click="cancel">取消</div>
      </div>
    </div>
    <div class="home">
      <div style="height: 98px" class="head-search"></div>
      <div class="empty-box" v-if="emptyShow">
        <img class="empty-box_img" :src="empty" />
        <div class="empty-box_text">暂无数据</div>
      </div>
      <div class="item-cell" v-for="i in data" v-else @click="toDetails(i)">
        <div class="item-cell_hd">
          <div class="item-cell_title ellipsis">【{{ i.title }}</div>
          <div class="item-cell_title" style="flex: 1">】财务信息审批</div>
          <div
            class="item-cell_tag"
            :class="{
              'item-cell_tag_ok': i.status == 2,
              'item-cell_tag_err': i.status == 3,
              'item-cell_tag_processing': i.status == 1,
            }"
          >
            {{
              i.status == 1
                ? "待处理"
                : i.status == 2
                ? "已通过"
                : i.status == 3
                ? "已驳回"
                : ""
            }}
          </div>
        </div>
        <div class="introduce">客户信息: {{ i.customer_name }}</div>
        <div class="introduce">订单金额: {{ i.order_amount }}元</div>
        <div class="introduce-bottom">
          <div style="flex: 1">申请人: {{ i.implement_name }}</div>
          <div>{{ i.create_time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import { mapGetters, mapActions } from "vuex";
let timer;
let text = "";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      empty: require("../assets/empty.png"), //列表为空图片
      emptySearch: require("../assets/empty-search.png"), //搜索为空图片
      value: "",
      data: [],
      emptyShow: false,
    };
  },
  computed: {
    review_id() {
      return this.$store.getters.getReview_id;
    },
  },
  methods: {
    //输入框输入值变化
    input(e) {
      let vm = this;
      var reg = e.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");
      if (e.length != reg.length) {
        vm.value = reg;
      }
      if (vm.value == "") {
        //值为空自动请求之前tab选中列表
        vm.data = [];
        vm.emptyShow = false;
        return;
      }
      text = e;
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        if (text == vm.value) {
          vm.getIsReviewList();
        }
      }, 1000);
    },

    //请求列表
    getIsReviewList(loading = true) {
      let vm = this;
      let param = {
        review_id: vm.review_id,
        name: vm.value,
      };
      if (vm.review_id == 0) {
        Toast.clear();
        Toast.fail("搜索失败");
        return;
      }
      vm.emptyShow = false;
      if (loading) {
        Toast.loading({
          duration: 0,
          message: "加载中...",
          overlay: true,
        });
      }
      vm.$request.getIsReviewList(param).then(
        (data) => {
          Toast.clear();
          vm.data = data;
          if (data.length == 0) {
            vm.emptyShow = true;
          }
        },
        function (error) {
          Toast.clear();
          Toast.fail("请求失败");
        }
      );
    },
    /**跳转详情
     * demand_id 详情id
     * review_id 用户id
     */
    toDetails(param) {
      let newData = {
        list: this.data,
        value: this.value,
      };
      sessionStorage.setItem("searchData", JSON.stringify(newData));
      this.$store.commit("mutationsUrlParam", {
        demand_id: param.demand_id,
        review_type: param.type,
      });
      this.$router.push({ name: "details" });
      // window.location.href = `https://starcat-dev.ostyule.club/wx_ost/index.html?demand_id=${param.demand_id}&review_id=${this.review_id}&review_type=${param.type}#/details`;
    },
    cancel() {
      this.$router.go(-1);
    },
  },
  mounted() {
    document.title = "搜索";
    let searchData = sessionStorage.getItem("searchData");
    if (searchData) {
      this.data = JSON.parse(searchData).list;
      this.value = JSON.parse(searchData).value;
      this.getIsReviewList(false);
    }
  },
};
</script>

<style scoped>
.cancel-btn {
  font-size: 14px;
  margin-right: 12px;
}
.search {
  display: flex;
  align-items: center;
}
.van-search {
  flex: 1;
}
.empty-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.empty-box .empty-box_img {
  width: 117px;
  height: 100px;
  margin: 0 auto;
  display: block;
}
.empty-box_text {
  font-size: 14px;
  font-weight: 500;
  color: #afb4c7;
  line-height: 20px;
  text-align: center;
  margin-top: 9px;
}
</style>
